<template>
  <view class="container">

    <view class="news-detail-content">
      <!-- 标题 -->
      <text class="news-title">{{ model.title }}</text>
      <text class="news-subtitle" v-if="model.subTitle">{{ model.subTitle }}</text>

      <!-- 元信息 -->
      <view class="meta-info">
        <text class="meta-item">{{ model.source }}</text>
        <text class="meta-item">· {{ model.author }}</text>
        <text class="meta-item">· {{ formatTime(model.publishTime) }}</text>
        <view class="meta-item view-count">
          <u-icon name="eye" color="#94a3b8" size="14"></u-icon>
          <text>{{ model.viewCount }}</text>
        </view>
      </view>
      <!-- 摘要 -->
      <view class="summary-card" v-if="model.summary">
        <u-icon name="info-circle" color="#0ea5e9" size="16"></u-icon>
        <text class="summary-text">{{ model.summary }}</text>
      </view>

      <!-- 内容 -->
      <view class="news-content">
        <u-parse :content="model.content"></u-parse>
      </view>

      <!-- 底部操作区 -->
      <view class="action-bar">
        <view class="action-item" @click="handleLike">
          <u-icon :name="isLiked ? 'heart-fill' : 'heart'" :color="isLiked ? '#ef4444' : '#64748b'" size="24"></u-icon>
          <text :class="{'liked-text': isLiked}">{{ displayLikeCount }}</text>
        </view>
        <view class="action-item" @click="handleShare">
          <u-icon name="share" color="#64748b" size="24"></u-icon>
          <text>分享</text>
        </view>
      </view>
    </view>
    <!-- 底部间距 -->
    <view class="bottom-space"></view>
    <!-- 提示组件 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLiked: false,
        model: {
          "title": "中国数字经济规模突破60万亿元",
          "subTitle": "数字化转型加速推进",
          "content": "据国家统计局最新数据，成为推动高质量发展的重要引擎。",
          "category": "财经",
          "cover": "https://picsum.photos/600/400?random=5",
          "source": "人民日报",
          "author": "刘建国",
          "publishTime": "2025-07-16 00:00:00",
          "lastUpdatedTime": "2025-07-23 11:27:42",
          "isPublished": false,
          "isPinned": false,
          "viewCount": 10234,
          "likeCount": 612,
          "summary": "数字经济成为经济增长的重要引擎。",
          "id": "2005"
        }
      }
    },
    computed: {
      displayLikeCount() {
        return this.isLiked ? this.model.likeCount + 1 : this.model.likeCount;
      }
    },
    onLoad(options) {
      if (options.id) {
        this.model.id = options.id;
        this.fetchData();
      }
    },
    methods: {
      fetchData() {
        uni.$u.http.get('/api/news/' + this.model.id).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.$u.toast(message)
            return
          }
          this.model = result
          // console.log(result)
        }).catch(err => {
          console.error('获取信息失败:', err)
        })

      },
      formatTime(timeString) {
        const date = new Date(timeString);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      },
      handleShare() {
        this.$refs.uToast.show({
          message: '开发中...',
          type: 'success'
        });
      },
      handleLike() {
        this.isLiked = !this.isLiked;
        this.$refs.uToast.show({
          message: this.isLiked ? '点赞成功！' : '取消点赞',
          type: 'success'
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
  }


  .news-detail-content {
    padding: 10rpx;
    background: white;
    margin: 10rpx;
    border-radius: 5rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid #f1f5f9;
    display: flex;
    flex-direction: column;
  }

  .news-title {
    font-size: 48rpx;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 16rpx;
  }

  .news-subtitle {
    font-size: 32rpx;
    font-weight: 500;
    color: #475569;
    line-height: 1.4;
    margin-bottom: 32rpx;
  }

  .meta-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16rpx;
    font-size: 26rpx;
    color: #64748b;
    margin-bottom: 32rpx;

    .meta-item {
      display: flex;
      align-items: center;
      gap: 8rpx;
    }

    .view-count {
      margin-left: auto; // 推到右边
    }
  }

  .cover-image-wrapper {
    margin-bottom: 48rpx;
    overflow: hidden; // 确保圆角生效
  }

  .summary-card {
    background: #e0f2fe;
    border-left: 8rpx solid #0ea5e9;
    border-radius: 16rpx;
    padding: 24rpx 32rpx;
    margin-bottom: 48rpx;
    display: flex;
    align-items: flex-start;
    gap: 16rpx;

    .summary-text {
      font-size: 28rpx;
      color: #0369a1;
      line-height: 1.6;
    }
  }

  .news-content {
    font-size: 32rpx;
    color: #334155;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 64rpx;
  }

  .action-bar {
    display: flex;
    justify-content: center;
    gap: 80rpx;
    padding: 32rpx 0;
    border-top: 1rpx solid #f1f5f9;

    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8rpx;
      font-size: 24rpx;
      color: #64748b;
      transition: all 0.2s ease;

      &:active {
        transform: scale(0.95);
      }

      .liked-text {
        color: #ef4444;
        font-weight: 500;
      }
    }
  }

  .bottom-space {
    height: 40rpx;
  }
</style>